<template>
    <div>
        <!-- <headerBack>电影搜索</headerBack> -->
        <div class="search_nav" ref="search">
            <div class="city_search">
                <div class="input" >
                    <span><i class="el-icon-search search_icon"></i></span>
                    <input type="text" placeholder="找影院" v-model="searchWord" @input="searchInput">
                    <span @click="clearInput" v-if="searchWord.length"><i class="el-icon-error error"></i></span>
                </div>
                <div class="cancel" @click="cancel">取消</div>
            </div>  
        </div>
        <div :style="{paddingTop: offsetHeight+'px'}" class="cinemas_search" >

            <!-- 影院 -->
            <CinemaList  class="cinemas_list" v-if="cinemas" :cinemas="cinemas">
                <div class="cinemas_total">查看全部{{cinemas.total}}家影院&nbsp;<i class="el-icon-arrow-right"></i></div>
            </CinemaList>
            <HistoryList class="search_history" v-if="historyList.length && isInput" :history-list="historyList"></HistoryList>

        </div>
    </div>
</template>
<script>

import CinemaList from './cinemaList'
import HistoryList from './historyList'

export default {
    data() {
        return {
            offsetHeight : null,
            searchWord:'',
            cinemas:null,
            isInput:false,
            historyList:[]
        }
    },
    mounted() {
        this.offsetHeight = this.$refs.search.offsetHeight;
        if(localStorage.cinemaHistoryList) {
             this.historyList = JSON.parse(localStorage.cinemaHistoryList)
        }
    },
    components:{
        CinemaList,
        HistoryList
    },
    methods:{
        searchInput() {
            this.isInput = false
            clearTimeout(this.timer)         
            this.timer = setTimeout(this.shake,500)
           
        },
        clearInput() {
            this.searchWord = '';
            this.isInput = true
            this.cinemas= null
        },
        cancel() {
            this.$router.go(-1)
        },
        shake () {
            if(this.searchWord.trim()) {
                if(this.historyList.indexOf(this.searchWord.trim()) < 0 ){
                    this.historyList.push(this.searchWord.trim());
                    localStorage.setItem('cinemaHistoryList',JSON.stringify(this.historyList))
                }
                this.axios.get(`/ajax/search?kw=${this.searchWord}&cityId=80&stype=2`).then(res=>{
                        this.cinemas =  res.data.cinemas
                })               
            }
        },
    }
}
</script>
<style scoped> 
    
    .search_nav{position: fixed ; top: 0;left: 0;right: 0;}

    .city_search{width: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 10px 8px;background-color:#FAFAFA;color: #fff;}
    .search_icon{color: #999;margin: 0 5px}
    .input{flex-grow: 1;display: flex;flex-direction: row;align-items: center;width: 100%;border-radius: 20px;background-color: #EAEAEA;padding: 2px;margin-right: 5px;font-size: 14px;color: #333;line-height: 18px}
    .input input{height: 100%;flex-grow: 1;margin-right:10px;outline: none;border: none;background-color: #EAEAEA;padding: 5px 0;font-size: 13px;}
    .error{color: #999;margin-right: 5px}
    .cancel{flex-shrink: 0;font-size: 13px;color: #e54847;margin: 0 5px}


    .cinemas_search{background:#f2f2f2; }
    .cinemas_list{background: #fff;}
    .cinemas_list_title{padding: 10px 12px;border-bottom: 1px solid #f2f2f2;font-size: 14px;color: #333;}
    .cinemas_total{font-size: 14px;color: #e54847;text-align: center;padding: 15px 0 ;}
    .search_history{
        background-color: #fff;
    }
</style>